<template>
  <div class="item-box">
    <block-header :icon="data.icon" :title="data.title" :number="data.num"></block-header>
    <ul class="lab" v-if="data.list.length > 0">
      <li v-for="(item,index) in data.list">
        <div class="head">
          <img :src="item.img"/>
          <span class="tip">{{item.name}}({{item.num}})</span>
        </div>
        <ul class="sign" v-for="(itip,itindex) in item.tip">
          <li :class="{'sign-activate':itip.is}">{{itip.text}}</li>
        </ul>
      </li>
    </ul>
    <span v-else class="tip-null">暂无数据</span>
  </div>
</template>

<script>
  import BlockHeader from './block-header'

  export default {
    name: 'portrait-list',
    components: {
      BlockHeader
    },
    mixins: [],
    computed: {},
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {}
    },
    methods: {},
    watch: {},
    mounted() {
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .item-box {
    .lab {
      padding-left: 1rem;
      margin-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      > li {
        background: #fff;
        width: calc(25% - 1rem);
        color: #fff;
        margin: 0 .5rem .3rem;
        .head {
          height: 7rem;
          overflow: hidden;
          border: .1rem solid #eee;
          position: relative;
          img {
            width: 100%;
          }
          .tip {
            position: absolute;
            width: 100%;
            text-align: center;
            font-size: .7rem;
            bottom: 0;
            display: block;
            background: rgba(0, 0, 0, 0.51);
            color: #fff;
          }
        }
        .sign {
          display: inline-table;
          padding-left: 0;
          > li {
            background: #ccc;
            color: #fff;
            float: left;
            margin-right: .2rem;
            padding: 0 .2rem;
            line-height: 1.5;
            border-radius: .3rem;
            margin-bottom: .2rem;
            font-size: .8rem;
            &.sign-activate {
              background: #ff6600;
            }
          }
        }
      }
    }
  }
</style>
